<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" href="${initParam.root }/css/member/main_register.css">
<link rel="stylesheet" href="${initParam.root}/css/sunny/jquery-ui-1.9.2.custom.css" />
<script type="text/javascript" src="${initParam.root}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${initParam.root}/js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$( "#datepicker1" ).datepicker({
	         dateFormat: "yy-mm-dd",
	         dayNamesMin: ['월', '화', '수', '목', '금', '토', '일'], // 요일의 한글 형식.
	         monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'], // 월의 한글 형식.
	         showMonthAfterYear:true,
	         changeYear: true
	        });
		$( "#datepicker2" ).datepicker({
	         dateFormat: "yy-mm-dd",
	         dayNamesMin: ['월', '화', '수', '목', '금', '토', '일'], // 요일의 한글 형식.
	         monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'], // 월의 한글 형식.
	         showMonthAfterYear:true,
	         changeYear:true
	        });
		$("#goRegister").click(function(){
			if($("#userName").val()==""){
				alert("이름를 입력하세요");
				$("#userName").focus();
				return;
			}else if ($("#userId").val()==""){ 
				alert("아이디를 입력하세요");
				$("#userId").focus();
				return;
			}else if($("#userId").val().length<2){
				alert("아이디는 2자 이상입니다.");
				return;
			}else if($("#userId").val().length>12){
				alert("아이디는 12자 이하입니다.");
				return;$("#userId").val().length>12
			}else if($("#idcheckResult").val()=="false"){
					alert("아이디 중복 체크하세요");
					return;
			}else if($("#userEmail").val()==""){
				alert("email을 입력하세요");
				$("#userEmail").focus();
				return;
			}else if($("#portalSite").val()==""){
				alert("포탈사이트를 선택하세요");
				$("#portalSite").focus();
				return; 	
			}else if($("#emailCheckResult").val()=="false"){
				alert("이메일 중복 체크하세요");
				return;
			}else if($("#userPass").val()==""){
				alert("패스워드를 입력하세요");
				$("#userPass").focus();
				return;
			}else if($("#passConfirm").val()==""){
				alert("패스워드 확인을 입력하세요");
				$("#passConfirm").focus();
				return; 	
			}else if($("#userPass").val()!=$("#passConfirm").val()){
				alert("패스워드가 같지않습니다");
				$("#userPass").val("");
				$("#passConfirm").val("");
				$("#userPass").focus();
				return;
			}else if($("#registerForm :radio[name=m_likeCook]:checked").length==0){
				alert("관심요리를 선택하세요");
				return; 	
			}else if($("#registerForm :radio[name=m_married]:checked").length==0){
				alert("결혼유무를 선택하세요");
				return; 	
			}else if($("#registerForm :radio[name=m_gender]:checked").length==0){
				alert("성별을 선택하세요");
				return; 	
			}else if($("#anniversary1").val()==""){
				alert("기념일을 선택하세요");
				return; 	
			}else if($("#datepicker1").val()==""){
				alert("날짜를 입력하세요");
				return; 	
			}else if($("#anniversary2").val()==""){
				alert("기념일을 선택하세요");
				return; 	
			}else if($("#datepicker2").val()==""){
				alert("날짜를 입력하세요");
				return; 	
			}else{
				document.regisertForm.submit();
			}
			
		});//submit
		//아이디 중복체크 ajax로 처리
		//		<input type="hidden" id="idcheckResult" value="false"> 하단에 hidden으로 정의
		//		data.flag==true 일 경우 $("#idcheckResult").val("false"); 동일한 아이디가 있을경우 false값으로 지정
		// 	data.flag==false 일 경우 $("#idcheckResult").val("true"); 사용가능한 id일 경우 true로 지정
		// 전송 버튼을 누를경우
		/* 
		else if($("#idcheckResult").val()=="false"){
			alert("아이디 중복 체크하세요");
			return;
		}
			조건문을 통해 true일 경우에만 전송가능하도록 설정
		*/
		$("#idCheck").click(function(){
			var id=$("#userId").val();
			$.ajax({
				type:"POST",
				url : "${initParam.root}/member.do",
				data : "command=idCheck&m_id=" + id,
				dataType : "json",
				success : function(data) {
					 if(data.flag==true){
						$("#checkId").html(id+"는 동일한 아이디가 있습니다.");
						$("#idcheckResult").val("false");
					}else if(data.flag==false){
						$("#checkId").html(id+"는 사용가능한 아이디입니다.");
						$("#idcheckResult").val("true");
					} 
				}
			});
		}); // click
		
		//이메일 중복체크 ajax로 처리
		//		<input type="hidden" id="emailCheckResult" value="false"> 하단에 hidden으로 정의
		//		data.flag==true  일 경우 $("#emailCheckResult").val("false"); 동일한 이메일이 있을경우 false로 지정
		// 	data.flag==false 일 경우 $("#emailCheckResult").val("true"); 사용가능한 이메일 일 경우 true로 지정
		//		data.fail!=null 일 경우 $("#emailCheckResult").val("false"); 만약 이메일입력란에 @가 입력될 경우 false로 지정
		// 전송 버튼을 누를경우
		/* else if($("#emailCheckResult").val()=="false"){
				alert("이메일 중복 체크하세요");
				return;
		} 
			조건문을 통해 true일 경우에만 전송가능하도록 설정
		*/
		$("#emailCheck").click(function(){
			var email=$("#userEmail").val();
			var portalSite=$("#portalSite").val();
			 	$.ajax({
				type:"POST",
				url : "${initParam.root}/member.do", 
				data : "command=emailCheck&mEmail=" + email+"&mEmailPortalSite="+portalSite,
				dataType : "json",
				success : function(data) {
					 if(data.flag==true){
							$("#checkEmail").html(email+"@"+portalSite+"는 동일한 email이 존재합니다.");
							$("#emailCheckResult").val("false");
					}else if(data.flag==false){
						$("#checkEmail").html(email+"@"+portalSite+"는 사용가능한 email입니다.");
						$("#emailCheckResult").val("true");
					}else if(data.fail!=null){
						$("#checkEmail").html(email+"@"+portalSite+data.fail);
						$("#emailCheckResult").val("false");
					} 
				}
			}); 
		}); // click
		$("#cancel").click(function(){
					location.href="${initParam.root }/index.jsp";
		});
	}); //load
	
</script>
<!-- 회원가입 폼 -->
	<h3><img alt="title" src="${initParam.root }/img/main/register/main-register-title.gif" id="regTitle"></h3>
<div id="회원가입">
	<form action="${initParam.root}/member.do" id="registerForm" method="post" name="regisertForm">
		<input type="hidden" id="idcheckResult" value="false">
		<input type="hidden" id="emailCheckResult" value="false">
		<input type="hidden" name="command" value="register">
		<ul id="회원정보1">
			<li><img alt="이름" src="${initParam.root }/img/main/register/main-register-name.gif" class="infoName"> <input type="text" id="userName" name="m_name"></li>
			<li class="id"> 
				<img alt="아이디" src="${initParam.root }/img/main/register/main-register-id.gif" class="infoId"> <input type="text" id="userId" name="m_id">
				<img alt="아이디중복검사" src="${initParam.root }/img/main/register/main-register-idbtn.gif" id="idCheck" ><br>
			</li>
			<li><span id="checkId"></span><li>
			<li><img alt="주민번호" src="${initParam.root }/img/main/register/main-register-ssn.gif" class="infoSsn"> <img alt="#" src="${initParam.root }/img/main/register/main-register-14.jpg"></li>
			
			<li class="email">
				<img alt="이메일" src="${initParam.root }/img/main/register/main-register-email.gif" class="infoEmail"> 
				<input type="text" id="userEmail" name="mEmail">@
				<select id="portalSite" name="mEmailPortalSite">
				<option value="">선택하세요</option>
				<option value="naver.com">naver.com</option>
				<option value="nate.com">nate.com</option>
				<option value="dreamwiz.com">dreamwiz.com</option>
				<option value="yahoo.com">yahoo.com</option>
				<option value="empal.com">empal.com</option>
				<option value="gmail.com">gmail.com</option>
				<option value="korea.com">korea.com</option>
				<option value="chol.com">chol.com</option>
				<option value="freechal.com">freechal.com</option>
				<option value="daum.net">daum.net</option>
				<option value="hotmail.com">hotmail.com</option>
				</select>
		
				<img alt="이메일중복검사" src="${initParam.root }/img/main/register/main-register-emailbtn.gif" id="emailCheck"><br> 
			</li>
			<li><span id="checkEmail"></span></li>
			
			<li>
				<img alt="비밀번호" src="${initParam.root }/img/main/register/main-register-password.gif" class="infoPass"> <input type="password" id="userPass" name="m_password">
				<img alt="비밀번호확인" src="${initParam.root }/img/main/register/main-register-repassword.gif" id="passCheck"> <input type="password" id="passConfirm" >
			</li>
			
			<li><img alt="info" src="${initParam.root }/img/main/register/main-register-info.gif" id="idInfo"></li>
		</ul>
		
		<hr>
		
		<ul id="회원정보2">
			<li><img alt="관심요리" src="${initParam.root }/img/main/register/main-register-favorite.gif" class="관심요리"><br></li>
			<li>
				<input type="radio" value="한식" name="m_likeCook" class="category">한식
				<input type="radio" value="일식" name="m_likeCook" class="category">일식
				<input type="radio" value="중식" name="m_likeCook" class="category">중식
				<input type="radio" value="양식" name="m_likeCook" class="category">양식<br>
			</li>
			
			<li><img alt="결혼유무" src="${initParam.root }/img/main/register/main-register-married.gif" class="결혼유무"><br></li>
			<li>
				<input type="radio" value="미혼" name="m_married" class="married">미혼
				<input type="radio" value="기혼" name="m_married" class="married">기혼<br>
			<li>
			
			<li><img alt="성별" src="${initParam.root }/img/main/register/main-register-gender.gif" class="성별"></li>
			<li>
				<input type="radio" name="m_gender" value="m" class="gender">남자
				<input type="radio" name="m_gender" value="f" class="gender">여자
			</li>
			
			<li><img alt="기념일" src="${initParam.root }/img/main/register/main-register-anniversary.gif" class="기념일"><li>
			<li>
				<select id="anniversary1" name="anniversary1" class="anniversary">
					<option value="">---</option>
					<option value="생일">생일</option>
					<option value="기념일">기념일</option>
				</select>
				<input type="text" id="datepicker1" name="a_date1" class="dateText"><br>
				<select id="anniversary2" name="anniversary2" class="anniversary">
					<option value="">---</option>
					<option value="생일">생일</option>
					<option value="기념일">기념일</option>
				</select>
				<input type="text" id="datepicker2" name="a_date2" class="dateText">
			</li>
		</ul>
			
		<div id="reg">	
			<img alt="가입하기" src="${initParam.root }/img/main/register/main-register-submit.gif" id="goRegister">
			<a href="#"><img alt="가입취소" src="${initParam.root }/img/main/register/main-register-cancel.gif" id="cancel"></a>
		</div>
	
	</form>
</div>
